<template>
  <div class="password_level">
    强度:
    <span :class="level === 1 ? 'weak' : ''">弱</span>
    <span :class="level === 2 ? 'middling' : ''">中</span>
    <span :class="level === 3 ? 'strong' : ''">强</span>
  </div>
</template>

<script>
import { pwdLevel } from '@/utils'

export default {
  name: 'PasswordLevel',
  props: {
    password: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      level: undefined
    }
  },
  watch: {
    password() {
      this.checkLevel()
    }
  },
  methods: {
    checkLevel() {
      this.level = pwdLevel(this.password)
      this.$emit('pwdLevel', this.level)
    }
  }
}
</script>

<style scoped lang="scss">
.password_level {
  span {
    margin-left: 5px;
  }
}

.weak {
  color: #d30000
}

.middling {
  color: #ffa400
}

.strong {
  color: #008000
}

</style>
